{% stylesheet %}
.block_collection_waterfall .block_collection_product ul {
  display: grid;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection_waterfall .block_collection_product li {
  list-style-type: none;
  line-height: 1.4;
  text-align: center;
}

.block_collection_waterfall .block_collection_product .product_pic {
  margin-bottom: 18px;
  position: relative;
}

.block_collection_waterfall .block_collection_product .soldout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
}

.block_collection_waterfall .block_collection_product .product_pic .product_img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.block_collection_waterfall .block_collection_product .product_pic img {
  max-width: 100%;
}

.block_collection_waterfall .block_collection_product .block_product_name {
  margin-bottom: 4px;
  line-height: 1.5;
}

.block_collection_waterfall .block_collection_product .product_price {
  font-weight: bold;
}

.block_collection_waterfall .block_collection_product .product_oldprice {
  color: #888;
  text-decoration: line-through;
  margin-left: 5px;
  display: inline-block;
  font-weight: normal;
}

.block_collection_waterfall {
  margin: 0 auto;
  gap: 30px;
}

.block_collection_waterfall.waterfall-fill {
  width: 100%;
  max-width: 100% !important;
}

.block_collection_waterfall .fall-item img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.block_collection_waterfall .fall-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.block_collection_waterfall .fall-item .block_product_name {
  margin-bottom: 10px;
  line-height: 1.5;
}

.block_collection_waterfall .fall-item .fall-item-number {
  font-size: 14px;
  font-weight: 400;
  margin-top: 10px;
  color: var(--main_color);
}

.block_collection_waterfall .fall-item .product_price {
  text-align: center;
}

@media (max-width: 767px) {
  .mo-waterfall-warp .mo-waterfall-column {
    grid-row-gap: 30px;
  }
}

{% endstylesheet %}


{% if section.settings.collection_id.id %}
{% get_collection collections_id={ section.settings.collection_id.id } %}
{% assign collection = collection  %}
{% endif %}

<div id="block_collection_waterfall-{{ block_id | default : section.block_id  }}" class="container_wrapper block_collection_waterfall {% if section.settings.is_fill %}full_container_wrapper{% endif %}">
  {% if section.settings.title != '' or section.settings.detail != '' %}
  <div class="block_title">
      {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
      {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
  </div>
  {% endif %}
  <div class="mo-waterfall-warp block_collection_product {% if section.settings.is_mobile_name %}show-mobile_name{% endif %}" id='block_product_waterfall-{{ block_id | default : section.block_id  }}'>
  </div>
</div>
<script type="text/x-template" id="omesaas-collection-product-temp">
  {% include 'waterfall_product' %}
</script>
<script type="text/javascript">
(function(){const waterfall = new waterfalls({
    id: "#block_product_waterfall-{{ block_id | default : section.block_id  }}",
    bottomDistance: 30,
    scrollBottom: scrollBottom,
    renderType:"liquid",
    renderComplete(node){
        node.find(".product_vie_waterfall").click(oemsaasQuickview);
        window.addLazyImages && addLazyImages(node.find("img[data-src]"));
    },
    resizeConfig: [{
            min:0,
            max: 767,
            rowGutter: '15px',
            columnsGutter: '15px',
            columns: {{ section.settings.mobile_column }}
        },
        {
                min: 768,
                max: 1199,
                rowGutter: '30px',
                columnsGutter: '30px',
                columns: 3
        },
        {
            min: 1200,
            rowGutter: '30px',
            columnsGutter: '30px',
            columns: {{ section.settings.web_column }}
        }
    ],
    render(data,callback) {
      engine.registerFilter('money', val => formatMoney(val, oemcart_currency))

      engine.parseAndRender($("#omesaas-collection-product-temp").html(), {
                products: data,
                theme_config:themeConfig,
                lang:lang,
                collection_handle: "{{collection.handle }}",
                data_from:"{{data_from}}"
            }).then(function (liquidHtml) {
              const node = $(liquidHtml);
              callback && callback.call(this,node)
      });
      
    }
})

{% if section.settings.collection_id.id == "" %}
    waterfall.RenderDefaultData({
      image: {alt: "", src: "{{ 'empty.png' | public_asset_abs_url }}"},
      inventory_policy: 1,
      inventory_quantity: 0,
      inventory_tracking: 0,
      title: "title",
      variant: {price: 18.8, compare_at_price: 188},
      variant_compare_at_price_max: 188,
      variant_compare_at_price_min: 188,
      variant_price_max: 18.8,
      variant_price_min: 18.8,
    },'{{ section.settings.button_text }}')
{% endif %}


const collection_id = '{{ section.settings.collection_id.id | default : "" }}';


let page = 1;
    let isAll = true;
    let maxRequestNumber = '{{ section.settings.count }}';
    let isScrollLoad = false;


    function getCollection() {
        waterfall.showLoad()
        if (maxRequestNumber) {
            maxRequestNumber--
        }
        moi.ajax({
            url:`/collection/{{ section.settings.collection_id.id }}/products`,
            type:"get",
            data: {
              page: page,
              pagesize: 10,
            },
            success: function(ret) {
                if (!ret.code) {
                    isScrollLoad = false;
                    waterfall.hideLoad()
                    waterfall.addStorage(ret.data.list)
                    isAll = ret.data.paginate.pageTotal === page ? true : false;

                    //最大加载次数
                    if (!maxRequestNumber || isAll) {
                        waterfall.showMore("{{ section.settings.button_text }}", "/collections/{{collection.handle}}")
                    }
                  
                }
            }
        })
    }

    function scrollBottom() {
        if (!isScrollLoad && !isAll && maxRequestNumber) {
            isScrollLoad = true;
            page++
            getCollection()
        }
    }
    if (collection_id) {
        getCollection();
    }
   })()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_collection_waterfall",
	"icon": "icon-shangpinpubuliu",
	"is_global": false,
	"name": {
		"zh_CN": "商品瀑布"
	},
	"max_blocks": "5",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "专辑"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection_id"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title",
			"default": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail",
			"default": "title"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满"
			},
			"id": "is_fill"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc每排数量"
			},
			"default": "3",
			"id": "web_column",
			"max": "5",
			"min": "2"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量"
			},
			"default": "1",
			"id": "mobile_column",
			"max": "3",
			"min": "2"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "加载次数"
			},
			"default": "3",
			"id": "count",
			"max": "5",
			"min": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案"
			},
			"id": "button_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection_id": {
				"id": "",
				"title": ""
			},
			"title": "Collection Waterfall",
			"detail": "",
			"web_column": "4",
			"mobile_column": "2",
			"is_fill": false,
			"is_mobile_name": true,
			"count": "3",
			"button_text": "View More"
		},
		"blocks": []
	}
}
{% endschema %}